﻿@page "/pricing"
@inherits AppComponentBase

<PageOutlet Url="pricing"
            Title="Pricing"
            Description="pricings of the bit platform services" />

<div class="page-container">
    <section class="page-section main-section">
        <div class="page-section-content">
            <BitText Typography="BitTypography.H1" Gutter>Pricing</BitText>
            <BitText Typography="BitTypography.H4" Gutter>
                bit platform is open source and using it is truly free.
            </BitText>
            <BitText Typography="BitTypography.Subtitle1">
                When you require more, you may choose a package that fits your needs.
            </BitText>
        </div>
    </section>

    <section class="page-section mid-section">
        <div class="page-section-content">
            <div class="mid-container">
                <BitText Typography="BitTypography.H4" Gutter Class="blue-txt">
                    Get the features and support you need today
                </BitText>
                <hr style="width:100%" />
                <BitText Typography="BitTypography.H5">
                    Easily upgrade as your needs evolve
                </BitText>
            </div>
        </div>
    </section>

    <section class="page-section plans-section">
        <div class="page-section-content">
            <div class="plan-card-list">
                <div class="plan-card">
                    <div class="plan-card-header">
                        <BitText Typography="BitTypography.H5" Gutter>Product</BitText>
                    </div>
                    <div class="plan-card-body">
                        <div class="plan-card-title">
                            <BitText Typography="BitTypography.H4" Gutter>It's free</BitText>
                        </div>
                        <div class="plan-card-desc">
                            <div class="plan-card-item">
                                <svg width="24" height="21"><path d="M21.5443 0.762877C20.1651 1.68708 19.4818 2.23149 17.7804 3.76339C16.3237 5.06741 16.3496 5.05475 15.9371 4.63696C15.0864 3.73808 11.9668 2.9278 11.0774 3.39624C10.652 3.61146 10.7036 4.04192 11.1548 4.04192C12.3793 4.05458 13.5137 4.61164 14.4805 5.40924C15.3441 6.13088 15.3441 6.09289 14.1196 7.28293C12.8047 8.54896 10.9356 10.6379 9.89146 11.9926L9.09226 13.0307L8.42198 12.0559C6.83647 9.72637 5.12208 8.57433 4.06508 9.11867C3.67836 9.32127 3.74282 9.44788 4.90294 10.6507C5.92128 11.7015 6.97828 13.1954 7.72592 14.6512C8.33175 15.8288 9.82706 15.8288 10.8454 14.1323C11.5802 12.9041 13.475 10.562 15.0347 8.9668L16.4269 7.53616L16.762 8.27047C19.7526 14.8412 12.4567 22.45 6.32088 19.1584C0.0561834 15.7908 1.47411 4.99144 8.30603 4.02925C9.6466 3.83936 9.67232 3.39623 8.34461 3.23165C4.9158 2.77587 0.533132 6.76384 0.0690753 10.7393C-0.807472 18.3228 6.81073 23.2603 14.2613 19.956C18.7858 17.9556 20.8998 10.7645 18.1026 6.96645C17.8964 6.68796 17.7288 6.42211 17.7288 6.35874C17.7288 6.0929 20.0362 4.06723 22.4853 2.21882C25.2438 0.129861 23.813 -0.756371 21.5443 0.762877Z" fill="#2EA3FF" /></svg>
                                <BitText Typography="BitTypography.H6" Gutter><b>MIT</b> License</BitText>
                            </div>
                            <div class="plan-card-item">
                                <svg width="24" height="21"><path d="M21.5443 0.762877C20.1651 1.68708 19.4818 2.23149 17.7804 3.76339C16.3237 5.06741 16.3496 5.05475 15.9371 4.63696C15.0864 3.73808 11.9668 2.9278 11.0774 3.39624C10.652 3.61146 10.7036 4.04192 11.1548 4.04192C12.3793 4.05458 13.5137 4.61164 14.4805 5.40924C15.3441 6.13088 15.3441 6.09289 14.1196 7.28293C12.8047 8.54896 10.9356 10.6379 9.89146 11.9926L9.09226 13.0307L8.42198 12.0559C6.83647 9.72637 5.12208 8.57433 4.06508 9.11867C3.67836 9.32127 3.74282 9.44788 4.90294 10.6507C5.92128 11.7015 6.97828 13.1954 7.72592 14.6512C8.33175 15.8288 9.82706 15.8288 10.8454 14.1323C11.5802 12.9041 13.475 10.562 15.0347 8.9668L16.4269 7.53616L16.762 8.27047C19.7526 14.8412 12.4567 22.45 6.32088 19.1584C0.0561834 15.7908 1.47411 4.99144 8.30603 4.02925C9.6466 3.83936 9.67232 3.39623 8.34461 3.23165C4.9158 2.77587 0.533132 6.76384 0.0690753 10.7393C-0.807472 18.3228 6.81073 23.2603 14.2613 19.956C18.7858 17.9556 20.8998 10.7645 18.1026 6.96645C17.8964 6.68796 17.7288 6.42211 17.7288 6.35874C17.7288 6.0929 20.0362 4.06723 22.4853 2.21882C25.2438 0.129861 23.813 -0.756371 21.5443 0.762877Z" fill="#2EA3FF" /></svg>
                                <BitText Typography="BitTypography.H6" Gutter>Unlimited commercial apps</BitText>
                            </div>
                            <div class="plan-card-item">
                                <svg width="24" height="21"><path d="M21.5443 0.762877C20.1651 1.68708 19.4818 2.23149 17.7804 3.76339C16.3237 5.06741 16.3496 5.05475 15.9371 4.63696C15.0864 3.73808 11.9668 2.9278 11.0774 3.39624C10.652 3.61146 10.7036 4.04192 11.1548 4.04192C12.3793 4.05458 13.5137 4.61164 14.4805 5.40924C15.3441 6.13088 15.3441 6.09289 14.1196 7.28293C12.8047 8.54896 10.9356 10.6379 9.89146 11.9926L9.09226 13.0307L8.42198 12.0559C6.83647 9.72637 5.12208 8.57433 4.06508 9.11867C3.67836 9.32127 3.74282 9.44788 4.90294 10.6507C5.92128 11.7015 6.97828 13.1954 7.72592 14.6512C8.33175 15.8288 9.82706 15.8288 10.8454 14.1323C11.5802 12.9041 13.475 10.562 15.0347 8.9668L16.4269 7.53616L16.762 8.27047C19.7526 14.8412 12.4567 22.45 6.32088 19.1584C0.0561834 15.7908 1.47411 4.99144 8.30603 4.02925C9.6466 3.83936 9.67232 3.39623 8.34461 3.23165C4.9158 2.77587 0.533132 6.76384 0.0690753 10.7393C-0.807472 18.3228 6.81073 23.2603 14.2613 19.956C18.7858 17.9556 20.8998 10.7645 18.1026 6.96645C17.8964 6.68796 17.7288 6.42211 17.7288 6.35874C17.7288 6.0929 20.0362 4.06723 22.4853 2.21882C25.2438 0.129861 23.813 -0.756371 21.5443 0.762877Z" fill="#2EA3FF" /></svg>
                                <BitText Typography="BitTypography.H6" Gutter>Access to all components</BitText>
                            </div>
                            <div class="plan-card-item">
                                <svg width="24" height="21"><path d="M21.5443 0.762877C20.1651 1.68708 19.4818 2.23149 17.7804 3.76339C16.3237 5.06741 16.3496 5.05475 15.9371 4.63696C15.0864 3.73808 11.9668 2.9278 11.0774 3.39624C10.652 3.61146 10.7036 4.04192 11.1548 4.04192C12.3793 4.05458 13.5137 4.61164 14.4805 5.40924C15.3441 6.13088 15.3441 6.09289 14.1196 7.28293C12.8047 8.54896 10.9356 10.6379 9.89146 11.9926L9.09226 13.0307L8.42198 12.0559C6.83647 9.72637 5.12208 8.57433 4.06508 9.11867C3.67836 9.32127 3.74282 9.44788 4.90294 10.6507C5.92128 11.7015 6.97828 13.1954 7.72592 14.6512C8.33175 15.8288 9.82706 15.8288 10.8454 14.1323C11.5802 12.9041 13.475 10.562 15.0347 8.9668L16.4269 7.53616L16.762 8.27047C19.7526 14.8412 12.4567 22.45 6.32088 19.1584C0.0561834 15.7908 1.47411 4.99144 8.30603 4.02925C9.6466 3.83936 9.67232 3.39623 8.34461 3.23165C4.9158 2.77587 0.533132 6.76384 0.0690753 10.7393C-0.807472 18.3228 6.81073 23.2603 14.2613 19.956C18.7858 17.9556 20.8998 10.7645 18.1026 6.96645C17.8964 6.68796 17.7288 6.42211 17.7288 6.35874C17.7288 6.0929 20.0362 4.06723 22.4853 2.21882C25.2438 0.129861 23.813 -0.756371 21.5443 0.762877Z" fill="#2EA3FF" /></svg>
                                <BitText Typography="BitTypography.H6" Gutter>Access to all project templates</BitText>
                            </div>
                            <div class="plan-card-item">
                                <svg width="24" height="21"><path d="M21.5443 0.762877C20.1651 1.68708 19.4818 2.23149 17.7804 3.76339C16.3237 5.06741 16.3496 5.05475 15.9371 4.63696C15.0864 3.73808 11.9668 2.9278 11.0774 3.39624C10.652 3.61146 10.7036 4.04192 11.1548 4.04192C12.3793 4.05458 13.5137 4.61164 14.4805 5.40924C15.3441 6.13088 15.3441 6.09289 14.1196 7.28293C12.8047 8.54896 10.9356 10.6379 9.89146 11.9926L9.09226 13.0307L8.42198 12.0559C6.83647 9.72637 5.12208 8.57433 4.06508 9.11867C3.67836 9.32127 3.74282 9.44788 4.90294 10.6507C5.92128 11.7015 6.97828 13.1954 7.72592 14.6512C8.33175 15.8288 9.82706 15.8288 10.8454 14.1323C11.5802 12.9041 13.475 10.562 15.0347 8.9668L16.4269 7.53616L16.762 8.27047C19.7526 14.8412 12.4567 22.45 6.32088 19.1584C0.0561834 15.7908 1.47411 4.99144 8.30603 4.02925C9.6466 3.83936 9.67232 3.39623 8.34461 3.23165C4.9158 2.77587 0.533132 6.76384 0.0690753 10.7393C-0.807472 18.3228 6.81073 23.2603 14.2613 19.956C18.7858 17.9556 20.8998 10.7645 18.1026 6.96645C17.8964 6.68796 17.7288 6.42211 17.7288 6.35874C17.7288 6.0929 20.0362 4.06723 22.4853 2.21882C25.2438 0.129861 23.813 -0.756371 21.5443 0.762877Z" fill="#2EA3FF" /></svg>
                                <BitText Typography="BitTypography.H6" Gutter>Open-source support (GitHub issues)</BitText>
                            </div>
                        </div>
                        <BitButton Class="plan-card-button" Href="/#our-products">Get started</BitButton>
                    </div>
                </div>

                <div class="plan-card">
                    <div class="plan-card-header">
                        <BitText Typography="BitTypography.H5" Gutter>Dedicated support</BitText>
                    </div>
                    <div class="plan-card-body">
                        <div class="plan-card-title">
                            <BitText Typography="BitTypography.H4" Gutter>€35</BitText>
                            &nbsp;
                            <BitText Typography="BitTypography.H6" Gutter>/ Hour</BitText>
                        </div>
                        <div class="plan-card-desc">
                            <div class="plan-card-item">
                                <svg width="24" height="21"><path d="M21.5443 0.762877C20.1651 1.68708 19.4818 2.23149 17.7804 3.76339C16.3237 5.06741 16.3496 5.05475 15.9371 4.63696C15.0864 3.73808 11.9668 2.9278 11.0774 3.39624C10.652 3.61146 10.7036 4.04192 11.1548 4.04192C12.3793 4.05458 13.5137 4.61164 14.4805 5.40924C15.3441 6.13088 15.3441 6.09289 14.1196 7.28293C12.8047 8.54896 10.9356 10.6379 9.89146 11.9926L9.09226 13.0307L8.42198 12.0559C6.83647 9.72637 5.12208 8.57433 4.06508 9.11867C3.67836 9.32127 3.74282 9.44788 4.90294 10.6507C5.92128 11.7015 6.97828 13.1954 7.72592 14.6512C8.33175 15.8288 9.82706 15.8288 10.8454 14.1323C11.5802 12.9041 13.475 10.562 15.0347 8.9668L16.4269 7.53616L16.762 8.27047C19.7526 14.8412 12.4567 22.45 6.32088 19.1584C0.0561834 15.7908 1.47411 4.99144 8.30603 4.02925C9.6466 3.83936 9.67232 3.39623 8.34461 3.23165C4.9158 2.77587 0.533132 6.76384 0.0690753 10.7393C-0.807472 18.3228 6.81073 23.2603 14.2613 19.956C18.7858 17.9556 20.8998 10.7645 18.1026 6.96645C17.8964 6.68796 17.7288 6.42211 17.7288 6.35874C17.7288 6.0929 20.0362 4.06723 22.4853 2.21882C25.2438 0.129861 23.813 -0.756371 21.5443 0.762877Z" fill="#2EA3FF" /></svg>
                                <BitText Typography="BitTypography.H6" Gutter>Expert-Led Workshops</BitText>
                            </div>
                            <div class="plan-card-item">
                                <svg width="24" height="21"><path d="M21.5443 0.762877C20.1651 1.68708 19.4818 2.23149 17.7804 3.76339C16.3237 5.06741 16.3496 5.05475 15.9371 4.63696C15.0864 3.73808 11.9668 2.9278 11.0774 3.39624C10.652 3.61146 10.7036 4.04192 11.1548 4.04192C12.3793 4.05458 13.5137 4.61164 14.4805 5.40924C15.3441 6.13088 15.3441 6.09289 14.1196 7.28293C12.8047 8.54896 10.9356 10.6379 9.89146 11.9926L9.09226 13.0307L8.42198 12.0559C6.83647 9.72637 5.12208 8.57433 4.06508 9.11867C3.67836 9.32127 3.74282 9.44788 4.90294 10.6507C5.92128 11.7015 6.97828 13.1954 7.72592 14.6512C8.33175 15.8288 9.82706 15.8288 10.8454 14.1323C11.5802 12.9041 13.475 10.562 15.0347 8.9668L16.4269 7.53616L16.762 8.27047C19.7526 14.8412 12.4567 22.45 6.32088 19.1584C0.0561834 15.7908 1.47411 4.99144 8.30603 4.02925C9.6466 3.83936 9.67232 3.39623 8.34461 3.23165C4.9158 2.77587 0.533132 6.76384 0.0690753 10.7393C-0.807472 18.3228 6.81073 23.2603 14.2613 19.956C18.7858 17.9556 20.8998 10.7645 18.1026 6.96645C17.8964 6.68796 17.7288 6.42211 17.7288 6.35874C17.7288 6.0929 20.0362 4.06723 22.4853 2.21882C25.2438 0.129861 23.813 -0.756371 21.5443 0.762877Z" fill="#2EA3FF" /></svg>
                                <BitText Typography="BitTypography.H6" Gutter>Focused Code Reviews</BitText>
                            </div>
                            <div class="plan-card-item">
                                <svg width="24" height="21"><path d="M21.5443 0.762877C20.1651 1.68708 19.4818 2.23149 17.7804 3.76339C16.3237 5.06741 16.3496 5.05475 15.9371 4.63696C15.0864 3.73808 11.9668 2.9278 11.0774 3.39624C10.652 3.61146 10.7036 4.04192 11.1548 4.04192C12.3793 4.05458 13.5137 4.61164 14.4805 5.40924C15.3441 6.13088 15.3441 6.09289 14.1196 7.28293C12.8047 8.54896 10.9356 10.6379 9.89146 11.9926L9.09226 13.0307L8.42198 12.0559C6.83647 9.72637 5.12208 8.57433 4.06508 9.11867C3.67836 9.32127 3.74282 9.44788 4.90294 10.6507C5.92128 11.7015 6.97828 13.1954 7.72592 14.6512C8.33175 15.8288 9.82706 15.8288 10.8454 14.1323C11.5802 12.9041 13.475 10.562 15.0347 8.9668L16.4269 7.53616L16.762 8.27047C19.7526 14.8412 12.4567 22.45 6.32088 19.1584C0.0561834 15.7908 1.47411 4.99144 8.30603 4.02925C9.6466 3.83936 9.67232 3.39623 8.34461 3.23165C4.9158 2.77587 0.533132 6.76384 0.0690753 10.7393C-0.807472 18.3228 6.81073 23.2603 14.2613 19.956C18.7858 17.9556 20.8998 10.7645 18.1026 6.96645C17.8964 6.68796 17.7288 6.42211 17.7288 6.35874C17.7288 6.0929 20.0362 4.06723 22.4853 2.21882C25.2438 0.129861 23.813 -0.756371 21.5443 0.762877Z" fill="#2EA3FF" /></svg>
                                <BitText Typography="BitTypography.H6" Gutter>Performance / Security Consultation</BitText>
                            </div>
                            <div class="plan-card-item">
                                <svg width="24" height="21"><path d="M21.5443 0.762877C20.1651 1.68708 19.4818 2.23149 17.7804 3.76339C16.3237 5.06741 16.3496 5.05475 15.9371 4.63696C15.0864 3.73808 11.9668 2.9278 11.0774 3.39624C10.652 3.61146 10.7036 4.04192 11.1548 4.04192C12.3793 4.05458 13.5137 4.61164 14.4805 5.40924C15.3441 6.13088 15.3441 6.09289 14.1196 7.28293C12.8047 8.54896 10.9356 10.6379 9.89146 11.9926L9.09226 13.0307L8.42198 12.0559C6.83647 9.72637 5.12208 8.57433 4.06508 9.11867C3.67836 9.32127 3.74282 9.44788 4.90294 10.6507C5.92128 11.7015 6.97828 13.1954 7.72592 14.6512C8.33175 15.8288 9.82706 15.8288 10.8454 14.1323C11.5802 12.9041 13.475 10.562 15.0347 8.9668L16.4269 7.53616L16.762 8.27047C19.7526 14.8412 12.4567 22.45 6.32088 19.1584C0.0561834 15.7908 1.47411 4.99144 8.30603 4.02925C9.6466 3.83936 9.67232 3.39623 8.34461 3.23165C4.9158 2.77587 0.533132 6.76384 0.0690753 10.7393C-0.807472 18.3228 6.81073 23.2603 14.2613 19.956C18.7858 17.9556 20.8998 10.7645 18.1026 6.96645C17.8964 6.68796 17.7288 6.42211 17.7288 6.35874C17.7288 6.0929 20.0362 4.06723 22.4853 2.21882C25.2438 0.129861 23.813 -0.756371 21.5443 0.762877Z" fill="#2EA3FF" /></svg>
                                <BitText Typography="BitTypography.H6" Gutter>Custom feature Development</BitText>
                            </div>
                            <div class="plan-card-item">
                                <svg width="24" height="21"><path d="M21.5443 0.762877C20.1651 1.68708 19.4818 2.23149 17.7804 3.76339C16.3237 5.06741 16.3496 5.05475 15.9371 4.63696C15.0864 3.73808 11.9668 2.9278 11.0774 3.39624C10.652 3.61146 10.7036 4.04192 11.1548 4.04192C12.3793 4.05458 13.5137 4.61164 14.4805 5.40924C15.3441 6.13088 15.3441 6.09289 14.1196 7.28293C12.8047 8.54896 10.9356 10.6379 9.89146 11.9926L9.09226 13.0307L8.42198 12.0559C6.83647 9.72637 5.12208 8.57433 4.06508 9.11867C3.67836 9.32127 3.74282 9.44788 4.90294 10.6507C5.92128 11.7015 6.97828 13.1954 7.72592 14.6512C8.33175 15.8288 9.82706 15.8288 10.8454 14.1323C11.5802 12.9041 13.475 10.562 15.0347 8.9668L16.4269 7.53616L16.762 8.27047C19.7526 14.8412 12.4567 22.45 6.32088 19.1584C0.0561834 15.7908 1.47411 4.99144 8.30603 4.02925C9.6466 3.83936 9.67232 3.39623 8.34461 3.23165C4.9158 2.77587 0.533132 6.76384 0.0690753 10.7393C-0.807472 18.3228 6.81073 23.2603 14.2613 19.956C18.7858 17.9556 20.8998 10.7645 18.1026 6.96645C17.8964 6.68796 17.7288 6.42211 17.7288 6.35874C17.7288 6.0929 20.0362 4.06723 22.4853 2.21882C25.2438 0.129861 23.813 -0.756371 21.5443 0.762877Z" fill="#2EA3FF" /></svg>
                                <BitText Typography="BitTypography.H6" Gutter>Implement Design System / Theme</BitText>
                            </div>
                            <div class="plan-card-item">
                                <svg width="24" height="21"><path d="M21.5443 0.762877C20.1651 1.68708 19.4818 2.23149 17.7804 3.76339C16.3237 5.06741 16.3496 5.05475 15.9371 4.63696C15.0864 3.73808 11.9668 2.9278 11.0774 3.39624C10.652 3.61146 10.7036 4.04192 11.1548 4.04192C12.3793 4.05458 13.5137 4.61164 14.4805 5.40924C15.3441 6.13088 15.3441 6.09289 14.1196 7.28293C12.8047 8.54896 10.9356 10.6379 9.89146 11.9926L9.09226 13.0307L8.42198 12.0559C6.83647 9.72637 5.12208 8.57433 4.06508 9.11867C3.67836 9.32127 3.74282 9.44788 4.90294 10.6507C5.92128 11.7015 6.97828 13.1954 7.72592 14.6512C8.33175 15.8288 9.82706 15.8288 10.8454 14.1323C11.5802 12.9041 13.475 10.562 15.0347 8.9668L16.4269 7.53616L16.762 8.27047C19.7526 14.8412 12.4567 22.45 6.32088 19.1584C0.0561834 15.7908 1.47411 4.99144 8.30603 4.02925C9.6466 3.83936 9.67232 3.39623 8.34461 3.23165C4.9158 2.77587 0.533132 6.76384 0.0690753 10.7393C-0.807472 18.3228 6.81073 23.2603 14.2613 19.956C18.7858 17.9556 20.8998 10.7645 18.1026 6.96645C17.8964 6.68796 17.7288 6.42211 17.7288 6.35874C17.7288 6.0929 20.0362 4.06723 22.4853 2.21882C25.2438 0.129861 23.813 -0.756371 21.5443 0.762877Z" fill="#2EA3FF" /></svg>
                                <BitText Typography="BitTypography.H6" Gutter>Priority support</BitText>
                            </div>
                            <br/>
                        </div>
                        <BitButton Class="plan-card-button" OnClick=@(WrapHandled(() => ShowBuyModal()))>Contact sales</BitButton>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <BitModal IsOpen=@isBuyModalOpen Classes="@(new() { Content = "modal-container" })">
        <BitButton Class="close-btn" OnClick=@WrapHandled(CloseModal) IconName="Cancel" Variant="BitVariant.Text" />
        @if (isSent)
        {
            <div class="modal-message-container">
                <BitText Typography="BitTypography.H3" Gutter>Thanks</BitText>
                <BitText Typography="BitTypography.H5" Gutter><b>@buyPackageModel.Email</b></BitText>
                <br />
                <BitText Typography="BitTypography.H6" Gutter>Your request has been sent</BitText>
                <BitText Typography="BitTypography.Body1">We will contact you soon</BitText>
            </div>
        }
        else
        {

            <EditForm Model="buyPackageModel" OnValidSubmit="SendMessage" class="form" novalidate>
                <DataAnnotationsValidator />
                <BitText Typography="BitTypography.H4" Gutter>Contact sale team</BitText>
                <BitText Typography="BitTypography.Subtitle1" Gutter>Buying the commercial package</BitText>
                <br />
                <BitTextField @bind-Value="@buyPackageModel.Email"
                              Label="Email"
                              IsRequired="true"
                              Class="modal-text-field"
                              Placeholder="name@company.com" />
                <ValidationMessage For="() => buyPackageModel.Email" />

                <BitTextField @bind-Value="@buyPackageModel.Message"
                              Label="Message"
                              IsMultiline="true"
                              Class="modal-text-field"
                              Placeholder="Describe your needs" />
                <ValidationMessage For="() => buyPackageModel.Message" />

                <BitButton ButtonType="BitButtonType.Submit" IsLoading="isSending">Send</BitButton>
            </EditForm>
        }
    </BitModal>
</div>